<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<title></title>
{include file="common/pub_style" /}
<style type="text/css">
.level-rule {padding: 15px;}
.level-rule .title {margin-left: 15px; margin-right: 15px;}
.level_unselected {border: 1px solid #f7f7f7; border-radius: 15px; padding: 15px; margin: 10px;}
.level_selected {background: url(../../image/select_bg.108b5bbe.png) 100% no-repeat;    background-size: 100% 100%;    border-radius: 15px;    padding: 15px;    margin: 10px;}
.level_bg {background: url(../../image/level_bg.png) 100% no-repeat; background-size: 100% 100%; height: 80px; width: 60px; color: #fb8c00!important; text-align: center;}
.tips {color: #6046ff;	font-weight: 600}
.bottomTable {padding: 0px;   border-radius: 10px;}
.item {flex: 1; align-items:center; text-align: center; padding: 20px 0px 20px 0px; overflow: hidden;}
.hd .item {color: #fff;}
.hd .item:first-child {border-radius: 20px 0px 0px 0px;}
.hd .item:last-child {border-radius: 0px 20px 0px 0px;}
.bd {}
.bd:last-child {border-radius: 0px 0px 20px 20px;}
.bar {position: fixed; background: #7fbacb;  bottom: 0px; left: 0px; right: 0px; color: #fff; z-index: 999; padding: 10px;}
.layui-layer-title {background: #7670d9; color:#fff;}
.layui-layer-dialog .layui-layer-content {background: linear-gradient(270deg,#1e2534,#0c1a37); color: #fff}
.layui-layer-btn {background: linear-gradient(270deg,#1e2534,#0c1a37);}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		isformnull();
		$(".btnupgrade").click(function(){
            var id = $(this).data('id');
            var layer1 = layer.open({
              title: "{$Think.lang.input_enter_paypwd_tips}",
              content: '<input type="password" id="paypwd" class="form-control" placeholder="{$Think.lang.input_enter_paypwd_tips}" style="border: 1px solid #ccc; color: #fff"/>',
              btn:["{$Think.lang.btn_submit}","{$Think.lang.btn_cancel}"],
              yes: function(index, layero){
                  var paypwd = $('body').find('#paypwd').val();
                  $.ajax({
                    type: "POST",
                    url: "{:url('upgrade')}",
                    dataType: "json",
                    data:{
                        id : id,
                        paypwd : paypwd
                    },
                    //请求成功
                    success : function(result) {
                    	//console.log(result);
                        layer.close(layer1);//关闭弹窗              
                        if (result.code ==99) {
                          layer.msg(result.msg);
                  		  setTimeout(function(){
               			    location.reload();
               			  },1000);
                        }
                        else
                          layer.msg(result.msg);
    				// 	location.reload();
                    },
                    //请求失败，包含具体的错误信息
                    error : function(e){
                        console.log(e.status);
                        console.log(e.responseText);
                    }
                });
              },
              btn2: function(index, layero){
                  
              }
            })
		})
		var sel = $(".level_selected").attr("data-key");
		bindData(sel);
		$(".level").click(function(){
			$(".level").each(function(index){
			  if ($(this).is(".level_selected")) {
				  $(this).removeClass("level_selected");
				  $(this).addClass("level_unselected");
			  }
			})
			 $(this).removeClass("level_unselected");
			 $(this).addClass("level_selected");
			 sel = $(".level_selected").attr("data-key");
			 bindData(sel);
		})
	})
	function bindData(sel) {
		var id = $("#level" + sel).attr("data-id");
		var deposit = $("#level" + sel).attr("data-deposit");
		var daily_pay = $("#level" + sel).attr("data-daily_pay");
		var month_pay = $("#level" + sel).attr("data-month_pay");
		$(".deposit").html(deposit);
		$(".daily_pay").html(daily_pay);
		$(".month_pay").html(month_pay);
		$(".btnupgrade").attr("data-id",id);
	}
</script>
</head>
<body>
	<div class="header-wrap">
	   <div class="flex flex-between pd10">
	      <div class="left-arrow" onclick='javascript:window.location.href="{:url('User/index')}"'></div>
	      <div class="">{$Think.lang.label_member_upgrade}</div>
	      <div class=""><a href="{:url('recode')}">{$Think.lang.recode}</a></div>
	   </div>
	</div>
	<div style="height: 50px"></div>
	<div class=" pd10">
		<div class="flex flex-center align-center flex-row">
		  {volist name="role" id="vo"}
		     {eq name="vo.disable" value="0"}		     
		     <div id="level{$key}" class="level  {eq name='key' value='$sel_level'}level_selected{else/}level_unselected{/eq}" data-key="{$key}" data-id="{$vo.id}" data-deposit="{$vo.deposit}" data-daily_pay="{$vo.daily_pay}" data-month_pay="{$vo.month_pay}"><div class="level_bg"><div class="text-body1 text-weight-bold text-orange-7" style="padding-top: 40px;">VIP{$key+1}</div></div></div>	  
		     {/eq}
		  {/volist}
		  <!-- 
		  <div class="level level_unselected"><div class="level_bg"><div class="text-body1 text-weight-bold text-orange-7" style="padding-top: 40px;">VIP2</div></div></div>
		  <div class="level level_unselected"><div class="level_bg"><div class="text-body1 text-weight-bold text-orange-7" style="padding-top: 40px;">VIP3</div></div></div>
		  <div class="level level_unselected"><div class="level_bg"><div class="text-body1 text-weight-bold text-orange-7" style="padding-top: 40px;">VIP4</div></div></div>
		  <div class="level level_unselected"><div class="level_bg"><div class="text-body1 text-weight-bold text-orange-7" style="padding-top: 40px;">VIP5</div></div></div>
		  <div class="level level_unselected"><div class="level_bg"><div class="text-body1 text-weight-bold text-orange-7" style="padding-top: 40px;">VIP6</div></div></div>
		  -->
		</div>
		<div class="level-rule">
		   <div class="flex flex-center align-center">
		     <img src="__PUBLIC__/image/l_levelrules.png" width="25">
		     <span class="title">{$Think.lang.level_rule}</span>
		     <img src="__PUBLIC__/image/r_levelrules.png" width="25">
		   </div>
		</div>
		<div class="bottomTable">
			 <div class="flex hd">
			    <div class="item">&nbsp;</div>
			    <div class="item">{$Think.lang.deposit_required}</div>
			    <div class="item">{$Think.lang.daily_payment_limit}</div>
			    <div class="item">{$Think.lang.monthly_payment_limit}</div>
			 </div>
			 {volist name="role" id="vo"}
			 <div class="flex bd">
			    <div class="item"><img src="{$vo.thumb}" style="width: 20px;">{$vo.title}</div>
			    <div class="item">{$vo.deposit}</div>
			    <div class="item">{$vo.daily_pay}</div>
			    <div class="item">{$vo.month_pay}</div>
			 </div>
			 {/volist}			 
		</div>	
		<div class="bottomTable list-record rule_bg" style="display: none;">
		    <h5 class="title flex"><div class="square_icon"></div>{$Think.lang.rolling_tips}</h5>
		    <div class="item pd20">
		       <div class="flex flex-between pd10"><div class="tl">{$Think.lang.your_level}：</div><span class="text-h6">VIP {$info.role_id}</span></div>
		       <div class="flex flex-between pd10"><div class="tl">{$Think.lang.your_balance}：</div><span class="text-h6">{$info.money}Tether(USDT)</span></div>
		    </div>
		</div>
		<div class="bottomTable list-record rule_bg">
		    <h5 class="title flex"><div class="square_icon"></div>{$Think.lang.level_rule}</h5>
		    <div class="item pd20">
		       <div class="flex flex-between pd10"><div class="tl">{$Think.lang.daily_payment_limit}：</div><div class="flex"><span class="text-h6 daily_pay">0</span><span class="text-h6 q-ml-md">USDT</span></div></div>
		       <div class="flex flex-between pd10"><div class="tl">{$Think.lang.monthly_payment_limit}：</div><div class="flex"><span class="text-h6 month_pay">0</span><span class="text-h6 q-ml-md">USDT</span></div></div>
		    </div>
		</div>
		<div class="text-orange">{$Think.lang.upgrade_tips1|raw}</div>
		<div style="height: 180px;"></div>
	</div>
	
    <div class="bar">
       <div class="flex flex-between align-center pd10">
          <div class="text-orange text-h6"><div class="flex"><span class="text-h6 deposit">0</span><span class="text-h6 q-ml-md">USDT</span></div></div>
          <div class="">
          		<button type="button" class="input-btn btnform pd10 btnupgrade btnred" style="height: inherit; margin-top: inherit; width: 120px;">
					<span class="btn-content">
						<span>{$Think.lang.btn_purchase}</span>
					</span>
				</button>
		  </div>
       </div>
    </div>
	{include file="common/footer" /}
</body>
</html>